/* 公共样式 */

/* 写一个页面的起手式 */
* {
    /* 设置边框不会撑大元素 */
    box-sizing: border-box;
    /* 清空默认样式 */
    padding: 0;
    margin: 0;
}

html {
    height: 100%;
}
/* 引入背景图 */
body {
    /* 需要注意相对路径的写法 */
    background-image: url(../image/8552503.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position:center center;
    /* 高度100%的意思是高度和父元素一样 */
    height: 100%;
}

/* 导航栏 */
.nav {
    /* 导航栏的高度一般为50px */
    height: 50px;
    background-color: rgba(50, 50, 50, 0.3);
    color:white;
    /* 使用弹性布局，让子元素水平方向排列 */
    display: flex;
    align-items: center;
}

/* 设置导航栏中logo的样式 */
.nav img {
    height: 40px;
    width: 40px;
    /* 设置左右外边距 */
    margin-left: 30px;
    margin-right: 10px;
    /* 设置圆角矩形，让其成为圆形 */
    border-radius: 20px;
}

.nav a {
    color: white;
    text-decoration: none;
    /* 这里使用内边距将a标签元素隔开更好，可以扩大元素点击范围 */
    padding: 10px;
}

.nav .space {
    width: 70%;
}

/* 页面的主题部分，也成为版心 */
.container {
    /* 设置成固定高度 水平居中 */
    width: 1050px;
    /* margin-left: auto; */
    /* margin-right: auto; */
    margin: 0 auto;
    /* 这里减号两侧必须要加空格
    因为原本css是不用-号的，在css3才引入，为了兼容
    之前有变量命名带了-号，所以现在约定-号两边带空格才表示减运算 */
    height: calc(100% - 50px);
    display: flex;
    /* 等间距铺开 */
    justify-content: space-between;
}

.container-left {
    height: 100%;
    width: 250px;
}

.container-right {
    height: 100%;
    width: 795px;
    border-radius: 10px;
    background-color: rgba(255,255,255,0.8);
    padding: 20px;
    /* 当内容超出范围时，自动添加滚动条 */
    overflow: auto;
}

.card {
    background-color: rgba(255,255,255,0.8);
    /* 圆边矩形 */
    border-radius: 10px;
    /* 内边距 */
    padding: 35px;
}

.card img {
    width: 180px;
    height: 180px;
    border-radius: 90px;
}

.card h3 {
    text-align: center;
    padding: 20px;
}

.card a {
    text-align: center;
    color: gray;
    text-decoration: none;
    /* 将a设置成块级元素，这样上面的水平居中才能生效 */
    display: block;
    margin-bottom: 10px;
}

.card .counter { 
    display: flex;
    padding: 5px;
    justify-content: space-around;
}

